<template>
	<view>
		<!-- 货运订单 -->
		<view class="index-container">
			<div style="height:50rpx;"></div>
			<!-- <Title :title="title"/>
			 <div style="height: 50rpx;"></div>-->
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('货运订单')}}
			</div>
			<div class="list-title">
				<p v-for="(item, index) in list" :class="{ active: index + 1 == params.status }"
					@click="sectionChange(index)">
					{{ item }}
				</p>
			</div>

			<div class="typeSty">
				<p class="commonSty" :class="{ activeType: '' === params.goods_type }" @click="packTypeChange('')">{{$t('全部')}}
				</p>
				<p class="commonSty" :class="{ activeType: 0 === params.goods_type }" @click="packTypeChange(0)">{{$t('大件')}}</p>
				<p class="commonSty" :class="{ activeType: 1 === params.goods_type }" @click="packTypeChange(1)">{{$t('小件')}}</p>
				<p class="commonSty"
					:class="{ activeType: 2 === params.goods_type, commonSty2: 2 === params.goods_type }"
					@click="packTypeChange(2)" v-if="params.status == 3">{{$t('运踪异常')}}</p>
			</div>
		</view>

		<view class="pt-330">
			<view class="pb-20">
				<OrderInfo @selectUser="selectUser" @readQuotition="readQuotition" v-for="(item, index) in orderInfo"
					:key="index" :keyValue="params.status" :allInfo="item" />
			</view>
		</view>

		<div class="center py-50 text-gray-500" v-if="nomore && params.page > 1">{{$t('没有更多了')}}</div>

		<u-empty class="pt-330" :text="$t('当前没有运输订单')" v-if="orderInfo.length == 0" textSize="28rpx"
			iconSize="100rpx"></u-empty>

		<!-- 运踪选人弹窗 -->
		<u-popup :show="selectUserIsShow" mode="bottom">
			<div class="between p-20 fz30 font-bold">
				{{$t('选择您的员工共同协作')}}
				<image src="/static/icon/close.png" mode="widthFix" class="w-20" @click="selectUserIsShow = false">
				</image>
			</div>
			<div style="height: 80vh;">
				<EmployeeList @selectUserConfirm="selectUserConfirm" :select="true" />
			</div>
		</u-popup>
		<!-- 运踪选人弹窗 -->


		<!-- 我的报价 -->
		<u-popup :show="myQuoteIsShow" mode="bottom">
			<div style="height: 80vh;">
				<quotation :prop_delivery_id="currentOrderId" :price_unit="price_unitUser" @cancelQuote="cancelQuote">
					<div class="center pt-20 font-bold  w-full">
						{{$t('我的报价')}}
						<div style="right:40rpx;top:20rpx;position: absolute">
							<image src="/static/icon/close.png" mode="widthFix" class="w-20 absolute"
								@click="myQuoteIsShow = false"></image>
						</div>
					</div>
				</quotation>
			</div>
		</u-popup>
		<!-- 我的报价 -->


	</view>
</template>

<script>
import OrderInfo from './components/orderInfo.vue'
import Title from './components/title.vue'
import { getDeliverySize, getDeliveryRecord, getOrder } from '@/api/order.js'
import EmployeeList from "../employeeList/employeeList"
import { createOrderDynamics } from '@/api/publish.js'
import quotation from "../quotation/quotation.vue";
export default {
	components: {
		OrderInfo,
		Title, EmployeeList, quotation
	},
	data() {
		return {
			currentOrderId: '',
			price_unit: '',
			selectUserIsShow: false,
			myQuoteIsShow: false,
			title: this.$t('货运订单'),
			list: [this.$t('已报价'), this.$t('已接单'), this.$t('进行中'), this.$t('已完成'), this.$t('售后')],
			packTypeList: [this.$t('全部'), this.$t('大件'), this.$t('小件'), this.$t('运踪异常')],
			current: 0,
			currentType: 0,
			orderInfo: [],
			price_unitUser: '',
			params: {
				user_id: uni.getStorageSync("user_id"),
				page: 1,
				limit: 10,
				status: 1,
				goods_type: ''
			},
			nomore: false,
		}
	},
	mounted() {
		this.getOrderFun()
	},
	created() {
		// 刷新页面
		window.onNativeShow = this.getOrderFun
	},
	onLoad(options) {
		if (options.status) {
			this.params.status = parseInt(options.status)
		}
		if (options.goods_type) {
			this.params.goods_type = parseInt(options.goods_type)
		}
		if (options.index) {
			this.params.status = options.index
		}
		this.getOrderFun()
		console.log(options);

	},
	methods: {
		cancelQuote(closeModal) {
			this.getOrderFun()
			if (closeModal) {
				this.myQuoteIsShow = false
			}
		},
		readQuotition(delivery_id, price_unit) {
			this.currentOrderId = delivery_id
			this.price_unitUser = price_unit
			console.log('this.allInfo--', price_unit)
			this.myQuoteIsShow = true
		},
		//选择员工后回调
		async selectUserConfirm(e) {
			console.log(e);
			if (e.length == 0) {
				return this.toast('请选择员工')
			}
			uni.showLoading({
				title: this.$t('加载中'),
				mask: true
			});
			const res = await createOrderDynamics({
				delivery_id: this.orderInfo[0].delivery_id,
				task_user_id: e.join(','),
				user_id: uni.getStorageSync("user_id")
			})
			if (res.data.code == 200) {

				setTimeout(() => {
					this.selectUserIsShow = false
					this.sectionChange(2)
					uni.navigateTo({
						url: "/pages/orderDynamics/orderDynamics?id=" + this.currentOrderId,
						success: () => {
							uni.hideLoading()
						}
					});
				}, 1500)
			}
			this.toast(res.data.message)
		},
		selectUser(delivery_id) {
			this.selectUserIsShow = true
			this.currentOrderId = delivery_id
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getOrderFun(true)
		},
		//上拉加载
		onReachBottom() {
			this.params.page++
			this.getOrderFun()
		},
		getOrderFun(init) {
			if (init) {
				this.params.page = 1
				this.nomore = false;
			}
			getOrder(this.params).then(res => {
				if (res.data.code === 200) {
					if (this.params.page == 1) {
						this.orderInfo = res.data.data.data || []
					} else {
						this.orderInfo = [...this.orderInfo, ...res.data.data.data]
					}
					//{{$t('当前')}}请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}{{$t('没有更多了')}}
					if (this.get(res, 'data.data.data').length == 0) {
						this.nomore = true;
					}
				}
				console.log('this.orderInfo--', this.orderInfo)
				// 结束下拉刷新
				uni.stopPullDownRefresh()

			})
		},
		back() {
			// uni.navigateBack()
			// uni.navigateTo({
			// 	url: '/pages/index/index'
			// })
			// uni.webView.postMessage({
			// 	data: {
			// 		action: 'back',
			// 	}
			// });
			this.cback()
		},
		sectionChange(index) {
			this.current = index
			this.params.status = index + 1
			this.orderInfo = []
			this.getOrderFun(true)
		},
		packTypeChange(index) {
			this.currentType = index
			this.params.goods_type = index
			this.getOrderFun(true)
		}
	}
}
</script>

<style lang="less">
page {
	background-color: #F6F7FB;
}

.index-container {
	width: 100%;
	background: #F6F7FB url("/static/bg/backcolorImg.png") no-repeat top / 100%;
	position: fixed;
	z-index: 60;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}

.list-title {
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding-left: 0;
	padding-top: 28rpx;

	p {
		height: 46rpx;
		font-size: 28rpx;
		color: #535353;
	}

	.active {
		font-size: 28rpx;
		color: #278AFF;
		font-weight: 600;
		border-bottom: 4rpx solid #278AFF;
	}
}

.typeSty {
	width: 96%;
	display: flex;
	justify-content: space-around;
	padding-left: 0;
	padding-top: 40rpx;
	margin: 0 auto;
	padding-bottom: 20rpx;
	gap: 25rpx;

	.commonSty {
		flex: 1;
		height: 56rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		border: none;
		background: #FFF;
		color: #333;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid transparent;
	}

	.commonSty2 {
		color: #ff1a4f !important;
		border-color: #ff1a4f !important;
		background-color: #ffe2e9 !important;
	}

	.activeType {
		width: 204rpx;
		height: 56rpx;
		flex-shrink: 0;
		border-radius: 500px;
		border: 1rpx solid #278AFF;
		background: #D7E9FF;
		color: #278AFF;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 48rpx;
		text-align: center;
	}
}
</style>
